<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import {listMarker} from '@/api/dashboard'

let map = null

// 点标记显示内容，HTML要素字符串
function markerContent(str, background) {
  return `<div class="custom-marker" style="background: url('/api/profile/upload/assets/${background}.png');">${str}</div>`
}

onMounted(() => {
  AMapLoader.load({
    key: '1fc51b0c951aeb41e426d47acd1aaee6', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
      .then((AMap) => {
        map = new AMap.Map('container', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 15, // 初始化地图级别
          center: [121.002032, 29.149757] // 初始化地图中心点位置
        })
        // 构造官方卫星、路网图层
        var satelliteLayer = new AMap.TileLayer.Satellite()
        var roadNetLayer = new AMap.TileLayer.RoadNet()
        //批量添加图层
        map.add([satelliteLayer, roadNetLayer])
        map.remove(roadNetLayer)
        addMarks() //添加文本标记
      })
      .catch((e) => {
        console.log(e)
      })
})
const addMarks = () => {
  listMarker().then((res) => {
    let markers = res.rows
    markers.forEach((item) => {
      var marker = new AMap.Marker({
        position: item.position.split(','),
        content: markerContent(item.name, item.background)
      })
      if (item.type == 1) {
        marker.on('click', function (e) {
          popup.value.open()
          type.value = 1
          dialogImageUrl.value = import.meta.env.VITE_APP_BASE_API + item.content
        })
      } else if (item.type == 2) {
        marker.on('click', function (e) {
          window.open('//' + item.content)
        })
      }
      if (item.type == 3) {
        marker.on('click', function (e) {
          popup.value.open()
          type.value = 3
          content.value = item.content
        })
      }
      map.add(marker)
    })
  })
}
onUnmounted(() => {
  map?.destroy()
})
const popup = ref(null)
const type = ref(0)
const dialogImageUrl = ref('')
const content = ref('')
</script>

<template>
  <div id="container"></div>
  <Popup width="1012" height="717.49" title="预览" ref="popup">
    <div class="flex-center" style="height: 515px">
      <img :src="dialogImageUrl" style="width: 100%; height: 100%; object-fit: scale-down" v-if="type == 1"/>
      <div class="map-content" v-html="content" v-else></div>
    </div>
  </Popup>
</template>

<style lang="scss">
#container {
  width: 100%;
  height: 100%;
}

.custom-marker {
  width: 155px;
  height: 72px;
  line-height: 62px;
  text-align: center;
  color: #fff;
  user-select: none;
}

.map-content {
  width: 100%;
  height: 100%;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  line-height: 25px;
  overflow: scroll;
}
</style>
